{% extends 'base.html' %}

{% block body %}

<!-- ===== Custom Styles ===== -->
<style>
  body {
    background: linear-gradient(135deg, #e8f5e9, #ffffff);
  }

  .login-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
  }

  .login-card {
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    padding: 2rem 2.5rem;
    transition: all 0.3s ease-in-out;
  }

  .login-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
  }

  .form-control {
    border-radius: 12px;
    border: 1px solid #cfcfcf;
    box-shadow: none;
    padding: 0.9rem;
  }

  .form-control:focus {
    border-color: #28a745;
    box-shadow: 0 0 0 0.2rem rgba(25, 135, 84, 0.25);
  }

  label {
    color: #555;
    font-weight: 500;
  }

  .btn-success {
    background-color: #28a745;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    font-size: 1.1rem;
    padding: 0.7rem 2rem;
    transition: all 0.3s ease;
  }

  .btn-success:hover {
    background-color: #218838;
    transform: translateY(-2px);
  }

  .illustration {
    max-width: 80%;
    border-radius: 15px;
  }

  .link-success {
    text-decoration: none;
  }

  .link-success:hover {
    text-decoration: underline;
  }

  @media (max-width: 768px) {
    .login-card {
      padding: 2rem;
      margin-top: 2rem;
    }

    .illustration {
      width: 100%;
      margin-bottom: 2rem;
    }
  }
</style>

<!-- ===== Login Section ===== -->
<section class="login-section">
  <div class="container">
    <div class="row justify-content-center align-items-center g-4">
      
      <!-- Left Image -->
      <div class="col-lg-6 text-center">
        <img src="static/logo_2.jpg" alt="GreenField Logo" class="img-fluid illustration shadow-sm">
      </div>

      <!-- Right Form -->
      <div class="col-lg-5">
        <div class="login-card">

          <!-- Flash Messages -->
          {% for message in messages %}
          <div class="alert alert-danger alert-dismissible fade show shadow-sm" role="alert">
            <strong>{{ message }}</strong>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
          </div>
          {% endfor %}

          <h3 class="text-center fw-bold text-success mb-4">
            <i class="bi bi-box-arrow-in-right"></i> Login to GreenField
          </h3>

          <!-- Login Form -->
          <form method="post" action="/Login">
            {% csrf_token %}

            <!-- Mobile Number -->
            <div class="form-floating mb-3">
              <input type="text" name="phone" id="phone" class="form-control" placeholder="Enter Mobile Number" maxlength="10" required>
              <label for="phone">Mobile Number</label>
            </div>

            <!-- Password -->
            <div class="form-floating mb-3">
              <input type="password" name="password" id="password" class="form-control" placeholder="Enter Password" required>
              <label for="password">Password</label>
            </div>

            <!-- Forgot Password -->
            <div class="d-flex justify-content-end mb-3">
              <a href="#" class="text-success small">Forgot Password?</a>
            </div>

            <!-- Submit Button -->
            <div class="text-center mt-4">
              <button type="submit" class="btn btn-success w-100 shadow-sm">
                <i class="bi bi-check-circle"></i> Login
              </button>
              <p class="small mt-3 mb-0">
                Don’t have an account? 
                <a href="/SignUp" class="link-success fw-semibold">Register Here</a>
              </p>
            </div>
          </form>
        </div>
      </div>

    </div>
  </div>
</section>

{% endblock body %}